<template>
  <el-container class="practiceAddForm-box">
    <el-header style="height: 25px;">
      <el-row :gutter="10">
        <el-col :span="6">
          <span @click="() => {this.$router.go(-1)}" class="font-blue my-btn">返回上级</span>
        </el-col>
        <el-col :push="3" :span="10"><span>新建练习</span></el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-form
        ref="addform"
        :model="formData"
        label-width="100px"
        size="mini"
        >
        <el-form-item class="my-input" label="名称：" prop="name">
          <el-input v-model="formData.name" placeholder="名称"></el-input>
        </el-form-item>

        <el-form-item label="调用题库：" prop="useQuest">
          <el-select v-model="formData.useQuest" placeholder="请选择题库">
            <el-option v-for="item in questOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="my-textarea" label="练习说明：" prop="intro">
          <el-input v-model="formData.intro" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="练习时间：" prop="date">
          <el-date-picker
            v-model="formData.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="练习对象：" prop="target">
          <el-row>
            <el-col :span="3">
              <el-button type="primary" @click="addGroup">+ 添加组织机构</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="addRole">+ 添加工作角色</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" @click="addPerson">+ 添加个人</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-table
              :data="targetFormat"
              border
              style="width: 80%">
              <el-table-column
                prop="type"
                label="类型"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="num"
                label="人数"
                width="180">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="{scope}">
                  <el-button @click="filter(scope)" type="text" size="small">筛选</el-button>
                  <el-button @click="del(scope)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column></el-table>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存更改</el-button>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
const questOptions = [{
  label: '题库1',
  value: '题库1'
}, {
  label: '题库2',
  value: '题库2'
}]

export default {
  name: 'ExamAddForm',
  data () {
    return {
      formData: {
        name: '',
        intro: '',
        date: '',
        useQuest: '',
        target: [{
          type: '组织机构',
          name: '组织机构名称',
          people: ['1','2','3']
        }]
      },
      questOptions
		}
  },
  computed: {
    targetFormat () {
      return this.formData.target.map(item => {
        let newItem = Object.assign({}, item)
        newItem.num = item.people.length
        return newItem
      })
    }
  },
  methods: {
    save () {
      console.log(this.formData);
      this.$message.info({
        message: `保存按钮按下`
      })
    },
    addGroup () {
      console.log(this.formData);
      this.$message.info({
        message: `添加组织机构按下`
      })
    },
    addRole () {
      console.log(this.formData);
      this.$message.info({
        message: `添加工作角色按下`
      })
    },
    addPerson () {
      console.log(this.formData);
      this.$message.info({
        message: `添加个人按下`
      })
    },
    filter (scope) {
      console.log(scope);
      this.$message.info({
        message: `筛选按钮按下`
      })
    },
    del (scope) {
      console.log(scope);
      this.$message.info({
        message: `删除按钮按下`
      })
    }

  }
}
</script>

<style>
  .practiceAddForm-box {
    text-align: left;
  }
  .practiceAddForm-box .times-input {
    width: 18%;
  }
  .practiceAddForm-box .my-textarea, .practiceAddForm-box .my-input {
    width: 43%;
  }
  .practiceAddForm-box .score-input {
    width: 40%;
    min-width: 60px;
  }
  .practiceAddForm-box .font-blue {
    color: #0366bb;
  }
  .practiceAddForm-box .font-red {
    color: #F56C6C;
  }
  .my-btn {
    cursor: pointer;
  }
</style>
